<template>
    <div class="perDetail">
        <x-header v-show="!isWeChar" class="perDetail__header" title="业绩明细">
            <div @click="goBack" slot="overwrite-left" class="details__header--img">
                <img slot="icon" class="go-back" src="~assets/x3/ico/goback1.png">
            </div>
        </x-header>
        <div v-show="!shop.isCurPerDetail" class="perDetail__title">
            <scroller :lock-x="false" lock-y>
                <div class="perDetail__title_btn">
                    <checker v-model="insureType" radio-required default-item-class="common__item" selected-item-class="common__item-selected common__bacolor--DefaultTheme">
                        <checker-item class="grid-center" :value="item.key" v-for="(item, index) in baseRiskCodeList" :key="index">{{item.value}}</checker-item>
                    </checker>
                </div>
            </scroller>
        </div>
        <div v-show="!shop.isCurPerDetail">
            <transition name="slide-fade">
                <!-- max-width:750px; 此宽度用于整体页面固定时-->
                <vue-scroller v-show="showAnimate" :style="scrollerTop" :on-refresh="refresh" :on-infinite="infinite" ref="my_scroller">
                    <div id="perDetail_list" v-for="(item,index) in shop.curShoPerDetail">
                        <group-title>{{item.showData}}</group-title>
                        <group>
                            <cell v-for="(order,orderIndex) in item.data" :key="orderIndex">
                                <span slot="after-title">
                                    <span class="perDel--proName">{{order.productName}}-{{order.planName}}</span>
                                    <span :style="riskCodeColor(order.riskCode)" class="perDel--risk">{{order.riskName}}</span>
                                </span>
                                <!-- <span class="perDel--data" slot="inline-desc">{{order.createTime}}</span> -->
                                <span class="perDel--data" style="margin-right: 20px;" slot="inline-desc">投保人：{{order.name}}</span>
                                <span class="perDel--data" slot="inline-desc">{{order.createTime}}</span>
                                <span class="perDel--price" slot="default">¥ &nbsp{{order.amount}}</span>
                            </cell>
                        </group>
                    </div>
                </vue-scroller>
            </transition>
        </div>

        <div v-show="shop.isCurPerDetail">
            <div v-for="(orderList,index) in shop.curPerDetail">
                <group-title>{{orderList.text}}</group-title>
                <group>
                    <cell v-for="(order,orderIndex) in orderList.orderList" :key="orderIndex">
                        <span slot="after-title">
                            <span class="perDel--proName">{{order.productName}}-{{order.planName}}</span>
                            <span :style="riskCodeColor(order.riskCode)" class="perDel--risk">{{order.riskName}}</span>
                        </span>
                        <span class="perDel--data" style="margin-right: 20px;" slot="inline-desc">投保人：{{order.name}}</span>
                        <span class="perDel--data" slot="inline-desc">{{order.createTime}}</span>
                        <span class="perDel--price" slot="default">¥ &nbsp{{order.amount}}</span>
                    </cell>
                </group>
            </div>
        </div>
    </div>
</template>

<script>
import DateUtil from "src/common/util/dateUtil";
import { mapState } from "vuex";
import { RequestUrl } from "src/common/url";
import SharePage from "src/js/sharePage"; //引入微信分享js
import { FooterIndex, Mutations, RouteUrl, WeChatShare } from "src/common/const";
import vueScroller from "src/common/vueScroller/components/Scroller";
import { XHeader, CheckerItem, Group, Scroller, Checker, Cell, XButton, Panel, GroupTitle } from "vux";
export default {
    computed: mapState([
        // "insureBaseInfo",
        "riskCodeList",
        "insurance",
        "user",
        "saveInsure",
        "isWeChar",
        "shareUuid",
        "detailsStore",
        "insuranceListTop",
        "insuranceBtn",
        "shop",
        "colorRiskTyle",
        "isWeAuth"
    ]),
    components: {
        vueScroller,
        Group,
        XHeader,
        Cell,
        Scroller,
        Checker,
        CheckerItem,
        GroupTitle
    },
    filters: {
        dataCon(val) {
            if (val != "") {
                return DateUtil.getDateStr_YmdhmByTs(new Date(val));
            } else {
                return "";
            }
        },

    },
    watch: {
        riskCodeList(cur, old) {
            for (let i = 0; i < cur.length; i++) {
                this.isReadRisk = true;
                this.baseRiskCodeList.push(cur[i]);
            }

        },
        // insureBaseInfo(cur, old) {
        //     this.showInsureList = this.insureBaseInfo[insureQueData.type];
        // },
        insureType(cur, old) {
            let done = this.done;
            done(false);
            this.$common.storeCommit(this, Mutations.PERFORMANCE_DETAILS_PER_DE_END, false);
            this.queryInsure("infinite");
            // this.showInsureList = this.insureBaseInfo[this.insureQueData.type];
            // if (this.isSeleList.indexOf(cur) < 0) {
            //     this.isSeleList += "," + cur;
            //     this.$common.storeCommit(this, Mutations.SET_ISPERDE_END, false);
            // } else {
            //     this.queryInsure("infinite");
            // }
            this.showAnimate = false;
            // this.$common.storeCommit(this, Mutations.SET_ISPERDE_END, false);

            // this.queryInsure("infinite");
            // console.log(this.shop.isPerDeEnd);
            let _this = this;
            setTimeout(function () {
                _this.showAnimate = true;
            }, 100);
        }
    },
    data() {
        return {
            done: "",
            baseRiskCodeList: [
                {
                    key: "all",
                    value: "全部"
                }
            ],
            isReadRisk: false,
            insureType: "all",
            insureQueData: {
                TYPE: "FORM",
                type: "all",
                sorttype: "ASC",
                pageNumber: 1,
                pageSize: 10
            },
            showInsureList: [],
            isQuery: false,
            showAnimate: true,
            isShop: false,
            userCode: "",
            registeDate: "",
            isSeleList: "all,",
            scrollerTop: "position: fixed;padding-top: 90px;padding-bottom: 300px;z-index:0;",
        };
    },
    methods: {
        riskCodeColor(code) {
            if (typeof code != "undefined") {
                if (code == "2724") {
                    code = "2725";
                }
                let riskCodeStyle = "border-color:" + this.colorRiskTyle[code].color + ";color:" + this.colorRiskTyle[code].color + ";display: -webkit-inline-box;width: max-content;";
                return riskCodeStyle;
            } else {
                return "";
            }
        },
        goBack() {
            this.$common.goBack(this);
        },
        init() {
            for (let i = 0; i < this.riskCodeList.length; i++) {
                this.isReadRisk = true;
                this.baseRiskCodeList.push(this.riskCodeList[i]);
            }
            let _this = this;
        },
        queryInsure(operation, done) {
            let userCodeBs = "henghua";
            if (this.$common.isNotEmpty(this.user.userDto.userCodeBs)) {
                userCodeBs = this.user.userDto.userCodeBs;
            }
            // debugger
            let queryData = {
                _this: this,
                operation: operation,
                riskCode: this.insureType,
                done: done,
                type: this.userCode,
                userCode: this.userCode,
                registeDate: this.registeDate,
                userCodeBs: userCodeBs
            };

            this.isQuery = true;
            this.$common.storeCommit(this, Mutations.PERFORMANCE_DETAILS, queryData);
        },
        refresh(done) {
            let doneValue = this.done;
            doneValue(false);
            this.$common.storeCommit(this, Mutations.PERFORMANCE_DETAILS_PER_DE_END, false);
            let _this = this;
            $("#perDetail_list").fadeOut();
            setTimeout(() => {
                _this.queryInsure("refresh", done);
                done();
            }, 400);
            $("#perDetail_list").fadeIn();
        },
        infinite(done) {
            let _this = this;
            this.done = done;
            setTimeout(() => {
                _this.queryInsure("infinite", done);
                console.log(_this.shop.isPerDeEnd);
                // debugger
                done(_this.shop.isPerDeEnd);
            }, 400);
        },
    },
    beforeRouteEnter(to, from, next) {
        localStorage["UUID_REF_URL"] = from.path;
        next();
    },
    mounted() {
        this.insureType = this.insurance.insureType;
        let _this = this;
        document.title = "恒华出行宝";
        // _this.$common.setUuid(_this);
        this.init();
        let query = {
            _this: this,
            userCode: this.user.userDto.userCode,
            userCodeBs: this.user.userDto.userCodeBs,
        }
        // this.$common.storeCommit(this, Mutations.IS_SHOW_VUE_SCROLLER_RE, true);
        this.$common.storeCommit(this, Mutations.PER_MONTH_COUNT, query);
        this.$common.storeCommit(this, Mutations.VUE_SCROLLER_NO_MORE_DATA, "没有更多数据了");
        this.$init.indexInit(this, FooterIndex.INSURANCE);
        this.$common.storeCommit(this, Mutations.VUE_SCROLLER_BTN, 220);
        let routeUrl = this.$route.path;
        if (routeUrl.indexOf(RouteUrl.SHOP_INDEX) > -1) {
            this.isShop = true;
        }
        if (this.user.isLogin) {
            this.registeDate = this.user.userDto.registeDate;
            this.userCode = this.user.userDto.userCode;
        }
        if (this.isWeChar) {
            this.scrollerTop = "position: fixed;padding-top: 45px;padding-bottom: 300px;z-index:0;";
        }

        this.$init.subPageInit(this);
    }
};
</script>
<style lang="scss" scoped >
.perDetail__header {
  z-index: 999;
}

.perDel--proName {
  font-weight: bolder;
  font-size: 15px;
}

.perDetail {
  background-color: #f0f0f0;
}

.perDetail__title {
  position: relative;
  height: 35px; // max-width: 750px;
  padding: 5px 20px;
  border-top: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
  background-color: #fff;
  z-index: 2; //auto：默认值。浏览器允许一些手势（touch）操作在设置了此属性的元素上，例如：对视口（viewport）平移、缩放等操作。
  //none：禁止触发默认的手势操作
  //pan-x：可以在父级元素(the nearest ancestor)内进行水平移动的手势操作。
  //pan-y：可以在父级元素内进行垂直移动的手势操作。
  //manipulation：允许手势水平/垂直平移或持续的缩放。任何auto属性支持的额外操作都不支持。
  //touch-action只支持具有CSS width和height属性的元素
  touch-action: none;
  user-select: none;
  -webkit-user-drag: none;
}

.perDel--data {
  font-size: 10px;
}

.perDetail__title_btn {
  width: max-content;
  text-align: center;
}

.perDetail__list {
  position: relative; // max-width: 750px;
  background-color: #C8161D;
}

.grid-center {
  color: #666;
  font-size: 14px;
}

.perDel--risk {
  font-size: 10px;
  padding: 1px 2px;
  border: 1px solid;
  border-radius: 3px;
}

a:link {
  text-decoration: none;
  color: #fff;
}

.perDel--price {
  color: #C8161D;
  font-weight: bolder;
  font-size: 14px;
}

a:visited,
a:active,
a:linked {
  text-decoration: none;
  color: #fff;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}

.weui-panel {
  margin-top: 0px !important;
}

.weui-media-box__hd {
  width: 120px !important;
  height: 90px !important;
}

.weui-media-box__bd {
  height: 90px !important;
}

.weui-media-box__title {
  color: #000;
  font-size: 15px !important;
}

.weui-media-box__desc {
  margin-top: 0px !important;
  line-height: 1.5 !important;
  font-size: 12px !important;
  color: #666666 !important;
  display: inline-block;
  white-space: nowrap;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
</style>
